<template>
  <view>
    <view class="uni-container">
      <uni-forms ref="form" v-model="formData" :rules="rules">
        <uni-forms-item :label="$t('updatePwd.field.oldPassword')" name="oldPassword" labelWidth="85">
          <input class="uni-input-border" type="password" :placeholder="$t('updatePwd.field.oldPassword')"
            v-model="formData.oldPassword" />
        </uni-forms-item>

        <uni-forms-item :label="$t('updatePwd.field.newPassword')" name="password" labelWidth="85">
          <input class="uni-input-border" :password="showPassword" :placeholder="$t('updatePwd.field.newPassword')"
            v-model="formData.password" />
        </uni-forms-item>

        <uni-forms-item :label="$t('updatePwd.field.passwordConfirmation')" name="passwordAgain" labelWidth="85">
          <input @confirm="submitForm" class="uni-input-border" :password="showPasswordAgain"
            :placeholder="$t('updatePwd.field.passwordConfirmation')" v-model="formData.passwordAgain" />
        </uni-forms-item>

        <view class="uni-button-group pointer">
          <button class="uni-button uni-button-full" type="primary"
            @click="submitForm">{{$t('updatePwd.button.save')}}</button>
        </view>
      </uni-forms>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations,
    mapActions
  } from 'vuex'
  import config from '@/admin.config.js'
  import md5 from 'js-md5'
  export default {
    data() {
      return {
        showPassword: true,
        showPasswordAgain: true,
        errorMessage: '',
        formData: {
          oldPassword: '',
          password: '',
          passwordAgain: ''
        },
        rules: {
          oldPassword: {
            rules: [{
              required: true,
              errorMessage: '请输入旧密码'
            }]
          },
          password: {
            rules: [{
                required: true,
                errorMessage: '请输入新密码'
              },
              {
                minLength: 7,
                maxLength: 20,
                errorMessage: '确认密码长度在 {minLength} 到 {maxLength} 个字符',
              },
            ]
          },
          passwordAgain: {
            rules: [{
                required: true,
                errorMessage: '请输入确认密码',
              },
              {
                minLength: 7,
                maxLength: 20,
                errorMessage: '确认密码长度在 {minLength} 到 {maxLength} 个字符',
              },
              {
                validateFunction: function(rule, value, data, callback) {
                  if (value != data.password) {
                    callback('密码不一致')
                  }
                  return true
                }
              }
            ]
          },
        }
      }
    },
    props: {
      isPopup: {
        type: Boolean,
        default: false
      },
    },
    computed: {
      ...mapState('user', ['userInfo'])
    },
    methods: {
      ...mapActions('user', ['updatePassword']),
      submitForm() {
        this.$refs.form.validate().then(data => {
          data.oldPassword = md5(data.oldPassword)
          data.password = md5(data.password)
          data.passwordAgain = data.password;

          this.updatePassword(data).then(data => {
            uni.showToast({
              title: "修改成功",
              mask: true,
              duration: 1500
            });
            setTimeout(() => {
              if(this.isPopup){
                this.$emit('closePasswordPopup');
              }else{
                uni.navigateBack()
              }
            }, 1500)
          })
        });
      },
      changePassword: function() {
        this.showPassword = !this.showPassword;
      },
      changePasswordAgain: function() {
        this.showPasswordAgain = !this.showPasswordAgain;
      }
    }
  }
</script>


<style>
  .uni-forms {
    width: 100%;
  }

  .login-button-width {
    width: 184px;
  }
</style>